<template>
	<div id="Invoice">
		<x-header :left-options="{showBack:false}" title="发票信息" class="header">
			<a slot="left" @click="common.back()"><i class="tp-icon icon-black-back"></i></a>
			<a slot="right" @click=""><i class="tp-icon icon-invoice-more"></i></a>
		</x-header>
		<div class="invoice-box">
			<div class="invoice-type">
				<checker v-model="type" default-item-class="type-item" selected-item-class="type-item-selected">
					<checker-item :value="item" v-for="(item, index) in types" :key="index">{{item.text}}</checker-item>
				</checker>
			</div>
			<div class="invoice-intro">
				电子发票与纸质发票具有相同法律效力，可作为报销、售后、维权凭证，推荐使用电子发票，不易丢失，更方便，环保。
			</div>
		</div>
		<div class="invoice-body">
			<div class="invoice-item">
				<label class="item-label">发票抬头</label>
				<div class="item-input item-checkbox">
					<div class="unit-type" v-for="(item, index) in units" @click="selectunit(index)">
						<icon type="circle" v-show="!item.show"></icon>
						<icon type="success" v-show="item.show"></icon>
						<span>{{item.text}}</span>
					</div>
				</div>
			</div>
			<div class="person" v-show="person">
				<div class="invoice-item">
					<label class="item-label">收票人手机</label>
					<div class="item-input">
						<input type="text" name="mobile" value="13598834300" placeholder="请填写收票人手机" />
					</div>
				</div>
				<div class="invoice-item">
					<label class="item-label">收票人邮箱</label>
					<div class="item-input">
						<input type="text" name="email" autocomplete="off" placeholder="请填写收票人邮箱" />
					</div>
				</div>
				<div class="invoice-item">
					<label class="item-label">发票内容</label>
					<div class="item-input">
						<input type="text" name="content" value="商品内容" />
					</div>
				</div>
			</div>
			<div class="company" v-show="company">
				<div class="invoice-item">
					<label class="item-label">单位名称</label>
					<div class="item-input">
						<input type="text" name="conmapy" placeholder="请填写单位名称" />
					</div>
				</div>
				<div class="invoice-item">
					<label class="item-label">单位税号</label>
					<div class="item-input">
						<input type="text" name="number" placeholder="纳税人识别码或统一社会信用代码" />
					</div>
				</div>
			</div>
		</div>
		<div class="invoice-body" v-show="company">
			<div class="invoice-item">
				<label class="item-label">收票人手机</label>
				<div class="item-input">
					<input type="text" name="mobile" value="13598834300" placeholder="请填写收票人手机" />
				</div>
			</div>
			<div class="invoice-item">
				<label class="item-label">收票人邮箱</label>
				<div class="item-input">
					<input type="text" name="email" autocomplete="off" placeholder="请填写收票人邮箱" />
				</div>
			</div>
			<div class="invoice-item">
				<label class="item-label">发票内容</label>
				<div class="item-input">
					<input type="text" name="content" value="商品内容" />
				</div>
			</div>
		</div>
		<a href="javascript:;" class="look-notice">点击查看发票须知 ></a>
		<br />
		<br />
		<br />
		<a href="javascript:;" class="my-btn btn-success invoice-btn">完成</a>
	</div>
</template>

<script>
	import Vue from 'vue'
	import $ from 'jquery';
	import {
		Icon,
		XHeader,
		Toast,
		Checker,
		CheckerItem
	} from 'vux';

	export default {
		data() {
			return {
				person:true,
				company:false,
				types: [{
					key: '1',
					value: '1',
					text:'电子发票'
				}, {
					key: '2',
					value: '2',
					text:'纸质发票'
				}, {
					key: '3',
					value: '3',
					text:'不开发票'
				}],
				type:{ key: '1',value: '1',text:'电子发票'},
				units:[{
					key:0,
					value:'1',
					text:'个人',
					show:true
				},{
					key:1,
					value:'2',
					text:'单位',
					show:false
				}]
			}
		},
		components: {
			Icon,
			XHeader,
			Toast,
			Checker,
			CheckerItem
		},
		watch: {},
		mounted() {},
		activated() {

		},
		deactivated() {
			
		},
		created() {

		},
		//方法
		methods: {
			//选择发票抬头
			selectunit:function(index){
				if(index == 0){
					this.person = true;
					this.company = false;
					this.units[0].show = true;
					this.units[1].show = false;
				}else{
					this.person = false;
					this.company = true;
					this.units[1].show = true;
					this.units[0].show = false;
				}
			}
		}
	}
</script>

<style scoped>
	.header {
		background-color: #fff !important;
	}
	
	.invoice-box {
		margin-top: 0.26666rem;
		padding: 0.4rem 0;
		background-color: #fff;
	}
	
	.invoice-box .invoice-type .vux-checker-box{
		display: flex;
	}
	
	.invoice-box .invoice-type .type-item {
		margin: 0 0.42666rem;
		width: 2.48rem;
		height: 0.8rem;
		display: block;
		line-height: 0.8rem;
		font-size: 0.37333rem;
		text-align: center;
		border: solid 1px #999;
		color: #999;
		border-radius: 0.4rem;
		background-color: #fff;
	}
	
	.invoice-box .invoice-type .type-item-selected {
		border-color: #DD2835;
		color: #DD2835;
	}
	
	.invoice-box .invoice-intro {
		padding: 0.4rem;
		padding-bottom: 0;
		text-align: justify;
		line-height: 0.48rem;
		font-size: 0.32rem;
		color: #999;
	}
	.invoice-body{
		margin-top: 0.26666rem;
		background-color: #fff;
		padding: 0 0.4rem;
	}
	.invoice-body .invoice-item{
		display: flex;
		border-bottom: solid 1px #eee;
		line-height: 1.44rem;
	}
	.invoice-body .invoice-item:last-child{
		border-bottom: none;
	}
	.invoice-body .invoice-item .item-label{
		width: 2.56rem;
		font-size: 0.37333rem;
	}
	.invoice-body .invoice-item .item-input{
		flex: 1;
		display: flex;
	}
	.invoice-body .invoice-item .item-input input{
		width: 100%;
	}
	.invoice-body .invoice-item .item-input.item-checkbox{
		justify-content:flex-end;
	}
	.invoice-body .invoice-item .item-input .unit-type{
		margin-left: 0.46666rem;
		font-size: 0.37333rem;
	}
	.invoice-body .invoice-item .item-input .unit-type .weui-icon-circle,.unit-type .weui-icon-success{
		font-size: 0.4rem;
	}
	.invoice-body .invoice-item .item-input .unit-type .weui-icon-success{
		color: #DD2835;
	}
	.look-notice{
		margin: 0.4rem;
		font-size: 0.32rem;
		color: #999;
		display: block;
	}
	.invoice-btn{
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>